/*
 * @Author: xiaosihan 
 * @Date: 2024-09-19 09:22:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-23 00:15:30
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./accountSettings.module.less";
import PCHeader from "../PCHeader/PCHeader";
import clsx from "clsx";
import { Button, Input } from "antd";
import modifyPNG from "./modify.png";
import userStore from "@views/userStore";
import utils from "@utils";
import UpdataPhone from "./UpdataPhone/UpdataPhone";
import a86PNG from "./86.png";
import chatPNG from "./chat.png";
import updataPhoneSore from "./UpdataPhone/updataPhoneSore";
import utilsApi from "@api/utilsApi";

interface Iprops {
    children?: ReactNode
}
// 账号设置
export default function AccountSettings(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [editor, setEditor] = useState(false);
    const [avatarUrl, setAvatarUrl] = useState(userStore.avatarUrl);
    const [name, setName] = useState(userStore.name);
    const [phone, setPhone] = useState(userStore.phone);
    const saveData = useRef({} as { [key: string]: string });

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setAvatarUrl(userStore.avatarUrl);
        setName(userStore.name);
        setPhone(userStore.phone);
    }), []);

    // 编辑或者保存
    const modiyAndSave = () => {
        if (editor) {
            userStore.updateUser(saveData.current);
            setEditor(false);
        } else {
            setEditor(true);
        }

    }

    const modifyAvatarUrl = async () => {
        const file = await utils.selectFile();
        const avatarUrl = await utilsApi.uploadOss(file as File);
        userStore.updateUser({ avatarUrl });
    }

    return (
        <div
            ref={dom}
            className={styles.accountSettings}
        >
            <PCHeader />
            <div className={styles.connect} >
                <div className={clsx(styles.title, styles.bottomDash)} >账号设置</div>
                <div className={styles.base_info} >
                    <div className={styles.title} >
                        基本设置
                        <Button
                            type="link"
                            onClick={modiyAndSave}
                            className={styles.modify}
                        >
                            <img
                                alt=""
                                className={styles.modify_icon}
                                src={modifyPNG}
                            />
                            {editor ? "保存" : "修改"}
                        </Button>
                    </div>

                    <div>
                        <br />
                        <img
                            alt=""
                            src={avatarUrl}
                            className={clsx(styles.avatarUrl, editor && styles.editor)}
                            onClick={modifyAvatarUrl}
                        />
                    </div>
                    <div style={{ marginTop: 28 }} >
                        <span className={styles.lable} >昵称</span>
                        <span>
                            {
                                editor ?
                                    <Input
                                        className={styles.user_name}
                                        defaultValue={name}
                                        onChange={e => {
                                            saveData.current.name = e.target.value;
                                        }}
                                    />
                                    :
                                    <span> {name} </span>
                            }
                        </span>
                    </div>

                </div>
                <div className={clsx(styles.title, styles.bottomDash)} >账号安全</div>
                <div
                    className={styles.updataPhone}
                >
                    <img
                        alt=""
                        src={a86PNG}
                        className={styles.icon}
                    />
                    <span className={styles.phone} >手机号</span>
                    <span className={styles.phone} >{String(phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')}</span>
                    <Button
                        type="link"
                        onClick={() => updataPhoneSore.setOpen(true)}
                    >修改手机号</Button>
                </div>
                <br />
                <div className={styles.title} >绑定社交账号</div>
                <div
                    className={styles.updataPhone}
                >
                    <img
                        alt=""
                        src={chatPNG}
                        className={styles.icon}
                    />
                    <span className={styles.phone} >微信</span>
                    <span className={styles.phone} >-</span>
                    <Button
                        type="link"
                        onClick={() => { }}
                    >绑定</Button>
                </div>
            </div>

            {/* 修改手机号的弹窗 */}
            <UpdataPhone />

        </div>
    );

}